import React from 'react';
import { TextField } from '@mui/material';
import AdapterComponent from '../../general/AdapterComponent';

interface TimeRangeProps {
  model: string;
  [key: string]: any;
}

/**
 * TimeRange Component
 * Component for setting time range (min and max) for plots
 */
const TimeRange: React.FC<TimeRangeProps> = ({ model, ...otherProps }) => {
  return (
    <AdapterComponent
      model={model}
      convertToPython={(state: any) => {
        const lastUpdated = state.lastUpdated;
        if (state[lastUpdated]?.toString().endsWith('.')) {
          return undefined;
        }
        if (!isNaN(parseFloat(state.min)) && !isNaN(parseFloat(state.max))) {
          return [parseFloat(state.min), parseFloat(state.max)];
        }
        return undefined;
      }}
      convertFromPython={(prevProps: any, prevState: any, value: [number, number] | undefined) => {
        if (value !== undefined && prevProps?.value !== value && Array.isArray(value)) {
          return {
            min: value[0],
            max: value[1],
          };
        }
        return undefined;
      }}
    >
      <TextField fullWidth variant="filled" label="Starting time" id="min" />
      <TextField fullWidth variant="filled" label="Ending time" id="max" />
    </AdapterComponent>
  );
};

export default TimeRange;

